import request from "../../utils/request"

Page({
  player: null,

  data: {
    //控制页面显示的数据
    isplay: false,

    //歌曲信息
    songMeaasge: {},

    //歌曲url
    songUrl: "",

    //歌曲id
    songId: 0,

    // 计算进度条的宽度，这个值直接使用计算得到的 百分比 数字就可以了
    width: 0,
  },

  
  //1.请求当前歌曲数据，url，并播放
  async getSongMessageAndUrlAndPlay(id){
    //请求数据
    const songMeaasge = await request("/song/detail" , {ids: id})
    const songUrl = await request("/song/url" , {id: id})

    //保存数据
    this.setData({
        songMeaasge: songMeaasge.songs[0],
        songUrl: songUrl.data[0].url,
        songId: id
    })

    //播放歌曲
    this.player.src = this.data.songUrl
    this.player.title = this.data.songMeaasge

  },

  //2.点击暂停/播放的回调
  handleMusicPlay(){
    if(this.data.isplay){
        this.player.pause()
    }else{
        this.player.play()
    }
  },

  //3.点击上/下一曲的回调
  handleSwitch(event){
    //获取点击的类型
    const type = event.target.id

    //发送当前歌曲id 和点击的类型到推荐页
    getApp().mayEvent.emit("cahngeSong" , {type: type , id: this.data.songId})
  },


  onLoad(options) {
    //创建播放器实例(全局唯一的背景音频管理器)，定义全局变量保存
    this.player = wx.getBackgroundAudioManager()

    //监听播放器的各种事件
    //(1). 播放开始 -- 改变视图样式
    this.player.onPlay(() => {
        this.setData({
            isplay: true
        })
    })
    //(2). 播放暂停 -- 改变视图样式
    this.player.onPause(() => {
        this.setData({
            isplay: false
        })
    })
    //(3). 播放停止 -- 改变视图样式
    this.player.onStop(() => {
        this.setData({
            isplay: true
        })
    })
    //(4). 播放器进度 -- 改变进度条样式
    this.player.onTimeUpdate(() => {
        this.setData({
            width: (this.player.currentTime / this.player.duration) * 100 + '%'
        })
    })

    //初始化请求当前歌曲信息 请求当前歌曲url , 并播放
    this.getSongMessageAndUrlAndPlay(options.id)

    //初始化监听推荐页面的传值
    getApp().mayEvent.on("gotoSong" , (data) => {
        //拿到新id后 重新请求对应的歌曲信息 ， 歌曲url , 播放歌曲
        this.getSongMessageAndUrlAndPlay(data)
    })
  },




  

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})